<script setup lang="ts" name="permissionMenu">
import { menuHandle } from '@/hooks/permission/menuHandle'

const {
    // 获取列表
    loading,  //表格加载中
    tableData, //表格数据
    pageTotal, //数据总条数
    getData,    //分页信息
    handleCurrentChange, // 页码改变重新请求列表

    // 按钮操作
    drawer,    //是否显示抽屉弹窗
    typeIndex, //抽屉弹窗标题下标
    handleType, //抽屉弹窗标题下标对应的标题
    showDrawer, // 点击添加用户按钮显示抽屉弹窗
    handleClose, // 右上角关闭抽屉弹窗
    cancelClick, // 点击抽屉弹窗底部关闭按钮隐藏弹窗
    formData, //表单数据
    selectIsRouter, // 是否路由选择
    formRef, // 表单对象
    rules, //表单规则
    submitForm, //提交表单
    delMenu, //删除菜单
    isShowChange, // 是否开启
} = menuHandle();


</script>

<template>
    <div style="text-align: center; color: #666;">
        <div v-permissionList="'listMenu'">
            <el-card shadow="never" style="text-align: right;" v-permission="'addMenu'">
                <el-row>
                    <el-col :span="24">
                        <el-button type="primary" @click="showDrawer(0)">新增菜单</el-button>
                    </el-col>
                </el-row>
            </el-card>
            <el-card shadow="never">
                <el-table :data="tableData" v-loading="loading" row-key="id" border default-expand-all
                    v-permission="'listMenu'">
                    <el-table-column prop="title" label="菜单标题" sortable />
                    <el-table-column prop="name" label="路由名称" sortable />
                    <el-table-column label="等级" sortable>
                        <template #default="scoped">
                            <el-tag type="danger">{{ scoped.row.level }}级</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="是否路由" sortable>
                        <template #default="scoped">
                            <el-tag v-if="scoped.row.is_router == 0">路由级</el-tag>
                            <el-tag type="danger" v-else>按钮级</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="是否开启" sortable>
                        <template #default="scoped">
                            <el-switch v-model="scoped.row.switch" @change="isShowChange($event, scoped.row)"
                                v-permissionSwitch="'menuIsShow'" :data-value="scoped.row.switch" />
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="220">
                        <template #default="scoped">
                            <el-button-group>
                                <el-button type="primary" size="small" v-if="scoped.row.is_router == 0"
                                    @click="showDrawer(2, scoped.row)" v-permission="'addSubMenu'">新增子菜单</el-button>
                                <el-button type="primary" size="small" @click="showDrawer(1, scoped.row)"
                                    v-permission="'editMenu'">编辑</el-button>
                                <el-button type="danger" size="small" @click="delMenu(scoped.row)"
                                    v-permission="'delMenu'">删除</el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <el-card shadow="never">
                <el-pagination background layout="prev, pager, next" :page-size="getData.size" :total="pageTotal"
                    @currentChange="handleCurrentChange" />
            </el-card>
        </div>
    </div>
    <!-- 抽屉弹出 -->
    <el-drawer v-model="drawer" :before-close="handleClose" v-if="drawer">
        <template #header>
            <h4>{{ handleType[typeIndex] }}</h4>
        </template>
        <template #default>
            <div>
                <el-form ref="formRef" :model="formData" :rules="rules" hide-required-asterisk>
                    <!-- <el-form-item label="父级菜单">
                        <el-tag>Tag 1</el-tag>
                    </el-form-item> -->
                    <el-form-item label="菜单图标">
                        <ElIconPicker v-model="formData.icon"></ElIconPicker>
                    </el-form-item>
                    <el-form-item label="菜单标题" prop="title">
                        <el-input v-model="formData.title" />
                    </el-form-item>
                    <el-form-item label="路由名称" prop="name">
                        <el-input v-model="formData.name" />
                    </el-form-item>
                    <el-form-item label="路由地址">
                        <el-input v-model="formData.url" />
                    </el-form-item>
                    <el-form-item label="是否路由">
                        <el-button :class="{ 'isRouter': formData.is_router == 0 }"
                            @click="selectIsRouter(0)">路由级</el-button>
                        <el-button :class="{ 'isRouter': formData.is_router == 1 }"
                            @click="selectIsRouter(1)">按钮级</el-button>
                    </el-form-item>
                    <el-form-item label="是否启用">
                        <el-switch v-model="formData.is_show" />
                    </el-form-item>
                    <el-form-item label="菜单排序">
                        <el-input-number :min="0" :max="9999999" v-model="formData.sort" />
                    </el-form-item>
                </el-form>
            </div>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="cancelClick">关闭</el-button>
                <el-button type="primary" @click="submitForm(formRef)">{{ handleType[typeIndex] }}</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<style scoped lang="scss">
.del-bnt {
    margin-bottom: 10px;
}

.isRouter {
    color: #fff;
    background-color: #409eff;
}
</style>